<style lang="scss">

</style>

<template>
    <el-upload action="uploadFile" :http-request="uploadFile" ref="upload" :file-list="fileList"
               class="upload-demo" drag multiple :disabled="disabled"
               :on-preview="doPreview">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
    </el-upload>
</template>

<script>
    import $ from 'jquery'

    export default {
        name: 'my-upload',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            name: {
                type: String,
                default: 'name'
            },
            url: {
                type: String,
                default: 'url'
            },
            type: {
                type: String,
                default: 'type'
            },
            disabled: {
                type: Boolean,
                default: false
            },
            value: {}
        },
        data () {
            return {
                fileList: [],
                fileAllPath: '',
                previewPath: ''
            }
        },
        methods: {
            // 初始化
            doInit () {
                if (this.disabled) {
                    $('.el-upload').hide()
                }
            },
            // 预览
            doPreview (file) {
                // window.open(file.previewPath + encodeURIComponent(file.fileAllPath));
                this.$previewFile(file.fileAllPath)
            },
            // 上传附件
            uploadFile (params) {
                let formData = new FormData() // 通过 FormData 对象上传文件
                formData.append('file', params.file)
                this.$axios.post(this.$api.common.uploadFile, formData).then((rs) => {
                    if (rs) {
                        // 组织成用户需要的格式返回给主组件
                        let file = rs
                        file[this.name] = rs.filename
                        file[this.url] = rs.filePath
                        file.fileAllPath = rs.fileAllPath
                        file.previewPath = rs.previewPath
                        file[this.type] = params.file.type
                        this.value.push(file)
                        this.$emit('change', this.value)
                    }
                })
            }
        },
        watch: {
            value (newValue) {
                this.fileList = []
                // 组织成子组件需要的格式
                for (let value of newValue) {
                    this.fileList.push({
                        name: value[this.name],
                        url: value[this.url],
                        type: value[this.type],
                        fileAllPath: value.fileAllPath,
                        previewPath: value.previewPath
                    })
                }
            }
        },
        components: {},
        computed: {},
        mounted () {
            this.doInit()
        }
    }
</script>
